<template>
  <div class="shopcar">
    <!-- 购车商品 -->
    <div class="mui-card" v-for="item in shoplist" :key="item.goodsId">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <div class="box">
            <div class="left">
              <!-- 复选框 -->
              <mt-switch
                v-model="item.value"
                @change="switchvalue(item)"
              ></mt-switch>
            </div>
            <div class="right">
              <h1>商品的id：{{ item.goodsId }}</h1>
              <!-- 数据选择框 -->
              <div class="right_bottom">
                <span class="spn_rice">￥2199</span>
                <!-- numberbox -->
                <div
                  class="mui-numbox"
                  data-numbox-min="1"
                  data-numbox-max="100"
                >
                  <button class="mui-btn mui-btn-numbox-minus" type="button">
                    -
                  </button>
                  <input
                    class="mui-input-numbox"
                    type="number"
                    @change="getnumberbox(item)"
                    :value="item.selectedNum"
                    :index="item.goodsId"
                  />
                  <button class="mui-btn mui-btn-numbox-plus" type="button">
                    +
                  </button>
                </div>
                <!-- 删除 -->
                <div class="remove">删除</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 总计 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <div class="amount">
            <div class="left">
              <div>总价（不含运费）</div>
              <div class="left_bottom">
                已勾选商品<span class="mount">{{ amount }}</span
                >件 ， 总价 ￥
                <span class="mount">0</span>
              </div>
            </div>
            <div class="right">
              <mt-button type="danger" size="small">去结算</mt-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: false,
      shoplist: this.$store.state.shoplist,
      amount: 0
    }
  },
  methods: {
    // 当numberbox 发生变化时触发
    getnumberbox(info) {
      if (info.value) {
        var inp = document.querySelector(`input[index="${info.goodsId}"]`)
        console.log(inp.value)
        var infos = info
        infos.selectedNum = parseInt(inp.value) - infos.selectedNum
        this.$store.commit('incrementamount', infos)
        this.amount = this.$store.getters.optAmount
        // console.log(infos.selectedNum)
        info.selectedNum = parseInt(inp.value)
        console.log(info.selectedNum)
      }
    },
    // 当复选框变化时触发计算
    switchvalue(info) {
      console.log(info)

      var inp = document.querySelector(`input[index="${info.goodsId}"]`)

      var infos = info

      infos.selectedNum = parseInt(inp.value)
      this.$store.commit('incrementamount', infos)
      this.amount = this.$store.getters.optAmount
    }
  }
}
</script>

<style lang="less" scoped>
.shopcar {
  background-color: #cccccc;
}
.box {
  display: flex;
  align-items: center;
  .right {
    margin-left: 15px;
    h1 {
      font-size: 14px;
      margin-bottom: 10px;
    }
    .right_bottom {
      display: flex;
      align-items: center;
      .spn_rice {
        margin-right: 5px;
        color: #9791a8;
      }
      .remove {
        margin-left: 5px;
        color: red;
      }
    }
  }
}
.amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    .left_bottom {
      margin-top: 5px;
    }
    color: #8f9dc1;
    .mount {
      font-weight: 700;
      color: red;
    }
  }
}
</style>
